<template>
	<div class="nav-con">
		<i class="navBor"></i>
		<ul class="nav-tab clearfix">
			<li v-for="(item,index) in navList.data" :key="index" :class="{'active':index==cur,'nav-item':true}" @click="$emit('switch',index)" v-if="!navList.isShow || index != 1">{{item.title}}</li>
		</ul>
	</div>
</template>

<script>
export default{
	props:{
		navList:{
			type: Object,
			require: true
		}
	},
	created(){
		this.cur = this.navList.index;
	},
	data(){
		return {
			cur: 0
		}
	},
	watch:{
		'navList.index'(){
			this.cur = this.navList.index;
		}
	}
}
</script>

<style>
.nav-con{
	margin-top: 20px;
	width: 100%;
	position: relative;
}
.nav-tab{
	position: relative;
}
.nav-item{
	float: left;height: 50px;
	line-height: 50px;padding: 0 30px;
	border-left: 1px solid #D2D2D2;
	border-top: 1px solid #D2D2D2;
}
.nav-item:last-child{
	border-right: 1px solid #D2D2D2;
}
.nav-tab .active{
	height: 51px;
	background-color: #fff;
	color: #004EFF;
	border: 1px solid #004EFF;
	border-bottom: 1px solid #fff;
}
.navBor{
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	border-bottom: 1px solid #D2D2D2;
}
</style>
